/* 
 * 1. toolbar 생성.
 * 2. 툴바에 아이템으로 기본 요소인 button 생성.
 *          iconMask = 마스크 추가로 아이콘 보이도록 하기.
 * 3. 탭바에 items 추가.  
 * 4. 탭바 속성지정.
 */
Ext.setup({
	tabletStartupScreen:"./tabletStartupScreen.png",
	phoneStartupScreen:"./phoneStartupScreen.png",
	tabletIcon:"./tabletIcon.png",
	phoneIcon:"./phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle:"black",
	fullscreen:true,
	preloadImages:[],
	scope:this,
	onReady: function() {
		var mainButton = [
			  {
				  text: '휴대폰', iconCls : 'action', leaf: true, iconMask:true,
				  handler: function(){
					  panel.layout.setActiveItem(tele_phone);
				  }
			  }, {
				  text: '통화기록', iconCls: 'compose', leaf: true, iconMask:true,
				  handler: function(){
					  panel.layout.setActiveItem(call_list);
				  }
			  }, {
				  text: '주소록', iconCls: 'search', leaf: true, iconMask:true,
				  handler: function(){
					  panel.layout.setActiveItem(friend_list);
				  }
			  }, {
				  text: '정보수정', iconCls: 'star', leaf: true, iconMask:true,
				  handler: function(){
					  panel.layout.setActiveItem(info);
				  }
			  }];
		var dockedItems = [{
        	xtype: 'toolbar',
            ui: 'light',
            items: mainButton,
            dock: 'bottom',
            layout: {
				pack: 'center'
			},
			cardSwitchAnimation: {
				type: 'slide',
				cover: true
            }
        }];
		
		panel = new Ext.TabPanel({
			fullscreen: true,  
			scroll:"vertical", 
			cardSwitchAnimation:"slide",
			layout:'card',	
			title:"Tabpanel test",  
			//items: mainButton,
			dockedItems: dockedItems,
			tabBar: {
				dock: 'bottom',
				layout: {
					pack: 'center'
				}
			}
		})
		panel.show(); 
	}
});
